<template>
    <div class="mainContent">
        <path-tracking :path='path' />
        <div class="pageContent">

            <basic-infos 
                ref="basicInfo"
                origin="shop"
                pageType='treat'
                @checkGift="checkGift"
            />
            
            <custom-tag 
                ref="customTag"
                title='客户标签'
                :hasScore="true"
            />
            <!-- 客服跟进历史 -->
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
                <div class="tableText">客服跟进历史</div>
            </div>
            <div class="bgBox">
                <div style="padding-bottom: 1rem;">
                    <div class="logCan" v-for="(item, index) in memo2" :key="index">
                        <div class="Time_Name">
                            <div>{{item.createTime}}</div>
                        </div>
                        <div class="memoContent">
                            {{item.content}}
                        </div>
                    </div>
                </div>
            </div>
  
            <div class="tableTitle">
                <div class="tableIcon"></div>
                <div class="tableText">备注：</div>
            </div>
            <div class="bgBox">
                <div style="padding-bottom: 1rem;">
                    <el-input type='textarea' rows="5" style="width: 100%;resize: none;" v-model="remarks" />
                </div>
            </div>
            <about-orders 
                ref="aboutOrders"
                :isTreat="true"
            />
            <!-- 按钮 -->
            <div class="btnsCan">
                <div class="btnLayout">
                    <div class="btn" @click="doSave(1)">确定</div>
                    <div class="btn cancel" @click="doCancel">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import datas from '../datas.js'
    import pathTracking from '@/components/common/pathTracking'
    import advancedSearch from '@/components/common/filter/advancedSearch.vue'
    import customTag from '../../component/customTag'
    import basicInfos from '../../component/basicInfos/forTreat.vue'
    import { modifyOrder, findStaffByName } from '../axios.js'
    import { getDetail } from '../../component/seeDetail/axios.js'
    import verifyResult from '../../component/verifyResult'
    import aboutOrders from '../../component/aboutOrders'
    export default {
        name: 'treat',
        data() {
            return {
                path: ['CRM', '预约管理', {label: '预约审核', name: 'bookedToShop'}, '接待'],
                dialogView: false,
                // input配置
                scheduleOption: datas.createScheduleOption,
                // 之前的数据
                previousData: '',
                remarks: '',
                followUpBy: '',
                loading: false,
                memo2: [],
                // 缓存记录
                searchKey: ''
            }
        },
        components: {
            advancedSearch,
            pathTracking,
            verifyResult,
            basicInfos,
            customTag,
            aboutOrders
        },
        methods: {
            // 存
            doSave() {
                // 详细信息
                let basicInfo = this.$refs.basicInfo.getResult();
                // 标签
                let tags = this.$refs.customTag.getResult();
                // 门店接待信息
                let treatInfo = this.$refs.aboutOrders.getResult();
                if(!basicInfo || !treatInfo || !tags) {
                    return
                }
                treatInfo.isDeal ? basicInfo.auditingStatus = 7 : basicInfo.auditingStatus = 6
                basicInfo = Object.assign(basicInfo, treatInfo)
                // 编辑/审核时需要把id传回去
                basicInfo.id = this.previousData.id

                // 客户标签
                basicInfo.systemTagCategoryVO = tags;
                basicInfo.followUpRecords = [];
                // 是否到店状态
                basicInfo.isArrival = true
                // 备注
                let obj = {
                    content: this.remarks,
                    type: 1
                }
                if(!/^[ ]*$/.test(this.remarks)) {
                    basicInfo.followUpRecords.push(obj)
                }
                // 客服创建的就是1，到店就是2
                basicInfo.type = 2;

                modifyOrder(basicInfo).then(res => {
                    if(res.data.status === 200) {
                        this.$message({
                            showClose: true,
                            message: '接待成功',
                            type: 'success'
                        });
                        this.sucCallback()
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            sucCallback() {
                this.$refs.basicInfo.clearInput();
                this.$router.replace({name: 'bookedToShop'})
            },
            doCancel() {
                this.$router.replace({name: 'bookedToShop'})
            },
            // 获取详情分发数据 
            getDetail() {
                let searchKey = this.$route.query.searchKey
                // 有id并id有变化重新拉取数据
                searchKey && getDetail(searchKey).then(res => {
                    if(res.data.status === 200) {
                        // this.searchKey = searchKey;
                        this.previousData = res.data.result;
                        // 显示上次的跟进人
                        this.followUpBy = res.data.result.supportStaff
                        let memosList = res.data.result.followUpRecords;
                        let memo2 = [];
                        Array.isArray(memosList) && memosList.map(ele => {
                            ele.type === 2 && memo2.push(ele);
                        })
                        this.memo2 = memo2;
                        // 给组件数据
                        this.$refs.basicInfo.dispatchData(res.data.result)
                        this.$refs.customTag.dispatchData(res.data.result, 'isTreat')
                    }
                }).catch(err => {
                    console.log('err: ', err)
                })
            },
            checkGift(phone) {
                this.$refs.aboutOrders.getGifts(phone)
            }
        },
        mounted(){
            let infoType = this.$route.query.infoType
            this.remarks = ''
            this.getDetail()
        }
    }
</script>
<style scoped>
    .pageContent{
        padding: 16px;
        min-width: 58rem;
    }
    .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 14px;
        font-weight: bold;
        color: #715D4A;
    }
    .couple{
        width: 30rem;
        display: flex;
        height: 4rem;
        font-size: 1.4rem;
        align-items: center;
        justify-content: center;
        color: #222222;
    }
    .lines{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .btnsCan{
        background: #FFF;
        padding: 1.5rem 0;
    }
    .btnLayout{
        text-align: center;
    }
    .btn{
        display: inline-block;
        width: 120px;
        height: 40px;
        border-radius: 20px;
        background: #7e6b5a;
        text-align: center;
        line-height: 40px;
        color: #FFF;
        font-size: 14px;
        cursor: pointer;
        margin: 0 8px;
    }
    .cancel{
        background: #000;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
    .logCan{
        width: 90%;
        display: flex;
        font-size: 1.4rem;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 2rem;
    }
    .memoContent{
        margin-left: 4rem;
    }
    .Time_Name{
        color: #8C8C8C;
    }
    .Time_Name div{
        text-align: right;
    }
</style>